<template>
  <div>
    <!-- 用户列表 -->

    <!-- 搜索框 -->

    <el-card>
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item>
          <el-input placeholder="搜索" v-model="keyword"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="search"
            >搜索</el-button
          >
          <el-button
            type="primary"
            icon="el-icon-circle-plus-outline"
            @click="handleAdd"
            >添加</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>

    <!-- <div>
      <el-table :data="tableData" border style="width: 100%">
    表格内容水平居中   :cell-style="{ textAlign: 'center' }"
    </div> -->

    <el-table
      :data="tableData"
      border
      style="width: 100%"
      :header-cell-style="{ textAlign: 'center' }"
      :cell-style="{ textAlign: 'center' }"
    >
      <el-table-column fixed prop="date" label="Id" width="120">
      </el-table-column>
      <el-table-column prop="username" label="用户名" width="120">
      </el-table-column>
      <el-table-column prop="nickname" label="昵称" width="120">
      </el-table-column>
      <el-table-column prop="city" label="角色名称" width="120">
        <el-button type="text" size="small">是</el-button>
        <el-button type="text" size="small">否</el-button>
      </el-table-column>
      <el-table-column prop="address" label="密码" width="100">
      </el-table-column>
      <el-table-column prop="isdelete" label="是否删除" width="130">
        <!-- <template slot-scope="scope">
          <el-switch
            v-model="scope.row.state"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-value="true"
            inactive-value="false"
            @change="changeSwitch(Sevent, scope.row, scope.$index)"
          >
          </el-switch>
        </template> -->

        <el-button type="text" size="small">是</el-button>
        <el-button type="text" size="small">否</el-button>
      </el-table-column>
      <el-table-column prop="enable" label="是否启用" width="130">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.states"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-value="true"
            inactive-value="false"
            @changes="changeSwitchs(Sevent, scope.row, scope.$indexs)"
          >
          </el-switch>
        </template>
        <!-- <el-button type="text" size="small">是</el-button>
        <el-button type="text" size="small">否</el-button> -->
      </el-table-column>
      <el-table-column prop="province" label="注册时间" width="350">
      </el-table-column>
      <el-table-column prop="remarks" label="备注" width="220">
      </el-table-column>
      <el-table-column fixed="right" prop="operation" label="操作" width="140">
        <template slot-scope="scope">
          <el-button
            @click="handleClick(scope.$index, scope.row)"
            type="text"
            size="small"
            icon="el-icon-edit"
            >编辑</el-button
          >
          <el-button
            type="text"
            size="small"
            icon="el-icon-delete"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 静态模态框，适用于增加和编辑 -->

    <el-dialog
      title="用户信息"
      :visible.sync="dialogFormVisible"
      style="overflow: hidden"
    >
      <el-form :model="formData" :label-position="labelPosition">
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="formData.username"></el-input>
        </el-form-item>
        <el-form-item label="昵称" :label-width="formLabelWidth">
          <el-input v-model="formData.nickname"></el-input>
        </el-form-item>
        <el-form-item label="角色名称" :label-width="formLabelWidth">
          <el-select v-model="formData.city" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input v-model="formData.address" autocomplete="off"></el-input>
        </el-form-item>
        <!-- <el-switch
          inactive-text="是否删除"
          v-model="formData.isdelete"
          active-color="#13ce66"
          inactive-color="#ff4949"
        >
        </el-switch> -->
        <!-- <el-switch
          inactive-text="是否启用"
          v-model="formData.enable"
          active-color="#13ce66"
          inactive-color="#ff4949"
        >
        </el-switch> -->
        <!-- <el-form-item label="注册时间" :label-width="formLabelWidth">
          <el-input v-model="formData.province" autocomplete="off"></el-input>
        </el-form-item> -->
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="formData.remarks" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="handleSave">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 分页组件 -->

    <div class="block">
      <el-pagination
        @size-change="handlePageSizeChange"
        @current-change="handlePageIndexChange"
        :current-page="pager.pageIndex"
        :page-size="pager.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pager.rowsTotal"
        background
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  methods:
    // 编辑
    {
      handleClick (index, row) {
        this.dialogFormVisible = true
        this.formData.id = 0
        this.currentIndex = index
        console.log(index, row)
      },
      // 删除
      handleDelete () {},
      // 添加
      handleAdd () {
        this.dialogFormVisible = true
      },
      // 搜索
      search () {},
      // 模态框取消
      cancel () {
        this.dialogFormVisible = false
      },
      // 模态框确定
      handleSave () {}
    },
  // switch开关
  // changeSwitch (index, row) {
  //   console.log(index, row)
  // },

  // 当页面大小发生改变的时候，重新拉取数据
  handlePageSizeChange () {

  },
  // 当页面代码发生改变的时候，重新拉取数据
  handlePageIndexChange () {

  },

  data () {
    return {
      formLabelWidth: '120px',
      currentIndex: 0,
      dialogFormVisible: false,
      keyword: '',
      labelPosition: 'left',
      pager: {
        pageIndex: 1,
        pageSize: 10,
        rowsTotal: 30
      },

      //   复选框  角色属性
      options: [
        {
          value: '选项1',
          label: '黄金糕'
        },
        {
          value: '选项2',
          label: '双皮奶'
        },
        {
          value: '选项3',
          label: '蚵仔煎'
        },
        {
          value: '选项4',
          label: '龙须面'
        }
      ],
      value: '',

      tableData: [
        {
          date: '1',
          username: '王小虎',
          nickname: '虎子',
          city: '',
          address: '113',
          isdelete: '',
          enable: '',
          province: '2016-05-02',
          value: true,

          remarks: '测试'
        },
        {
          date: '2',
          username: '张三',
          nickname: '369',
          city: '',
          address: '233',
          isdelete: '',
          enable: '',
          province: '2017-09-02',
          value: true,
          remarks: '测试1'
        }
      ],
      formData: [
        {
          data: 0,
          username: '王小虎',
          nickname: '虎子',
          city: '',
          address: '',
          isdelete: '',
          enable: '',
          province: '',
          value: true,
          remarks: ''
        }
      ]
    }
  }
}
</script>
<style>

.block{
  text-align: center;
  /* display: flex; */
  margin-top: 10px;
}

</style>
